<!DOCTYPE html>
<html lang="en">

<head>
    <title>个人中心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <link href="../../css/public.css" rel="stylesheet">

    <style>
        .home_zhangdui_nav {
            overflow: hidden;
            background: url('../../images/reg/back.png') 10px center no-repeat;
            border-bottom: 1px solid #24254E;
            background-size: 0.7rem;
        }

        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {

            color: #7E85C2;
        }

        input:-moz-placeholder,
        textarea:-moz-placeholder {

            color: #7E85C2;
        }

        input::-moz-placeholder,
        textarea::-moz-placeholder {

            color: #7E85C2;
        }

        input:-ms-input-placeholder,
        textarea:-ms-input-placeholder {

            color: #7E85C2;
        }

        .oldPhone {
            width: 90%;
            height: 50PX;
            background: #121459;
            border-bottom: 1px solid #1B1D68;
            margin: auto;
            line-height: 50px;
            color: #7E85C2;
            padding-left: 10px;
            font-size: .4rem;
            box-sizing: border-box;
        }

        .oldPhone span {
            color: #eae3ff;
        }

        .card_contain input {
            display: block;
            background: #121459;
            width: 90%;
            height: 50PX;
            border: 0;
            box-sizing: border-box;
            padding-left: 10px;
            border-bottom: 1px solid #1B1D68;
            color: #eae3ff;
            margin: auto;
            border-radius: 0;
        }

        .card_contain .confirm {
            display: block;
            width: 90%;
            background: #FFDE83;
            /* 一些不支持背景渐变的浏览器 */
            background: -moz-linear-gradient(top, #FFDE83, #FFB300);
            background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFDE83), to( #FFB300));
            background: -o-linear-gradient(top, #FFDE83, #FFB300);
            border: 0;
            margin: auto;
            margin-top: 45px;
            height: 50PX;
            border-radius: 5px;
            font-size: .5rem;
            font-weight: 550;
            letter-spacing: 3px;
            line-height: 50px;
        }

        .getCode {
            position: absolute;
            top: 22%;
            height: 23px;
            width: 90px;
            right: 11%;
            text-align: center;
            line-height: 25px;
            border-left: 1.5px solid #7069B3;
            font-size: .35rem;
            color: #7069B3;
            font-weight: 800;
        }

        .getCode input {
            height: 27px;
            display: block;
            width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
            padding-left: 0;
            color: #7069B3;
            background: none;
        }
    </style>
</head>

<body>

    <body>
        <div class="home_zhangdui_nav">
            <span class="goBack"></span>
            忘记密码
        </div>

        <div class="card_contain">

            <input class="newPhone" type="number" placeholder="请输入手机号码">
            <div class="getCode">
                <input type="button" style="height:27px" class="sendbtn" value="获取验证码" />
            </div>
            <input class="code" type="number" placeholder="请输验证码">
            <input class="pwd" type="password" placeholder="请输入新密码">
            <input class="confirrmPwd" type="password" placeholder="请确认密码">
            <button class="confirm">确认修改</button>
        </div>

        <script src="../../js/jquery-3.2.1.min.js"></script>
        <script src="../../js/public.js"></script>
        <script>
            $(function () {
                let handel,
                    num = 60, //几秒后重新获取
                    curCount, //当前剩余秒数
                    phoneNum,
                    validate,
                    pwd

                $('.newPhone').bind('input propertychange', function () {
                    if ($('.newPhone').val().length == 11) {
                        $('.sendbtn').click(() => {
                            getCode()
                        })
                    }
                })
               


                function getCode() {
                    curCount = num
                    let phone = $('.newPhone').val()
                    $(".sendbtn").attr({
                        disabled: "true"
                    }).val(curCount + "秒再获取");
                    $(".sendbtn").css('color', "#fff")
                    handel = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                    $.post(sendCodeUrl, {
                        phone
                    }, (res) => {
                        console.log(res);
                        // var str = res.split('!');

                        
                    })
                }
                //timer处理函数
                function SetRemainTime() {
                    if (curCount == 0) {
                        window.clearInterval(handel); //停止计时器
                        $(".sendbtn").removeAttr("disabled").val("重新获取"); //启用按钮
                    } else {
                        curCount--;
                        $(".sendbtn").val(+curCount + "秒再获取");
                    }
                }

                $('.confirm').click(function(){
                    phoneNum=$('.newPhone').val()
                    validate=$('.code').val()
                    pwd=$('.confirrmPwd').val()
                    $.post(forgetPwd,{phoneNum,validate,pwd},res=>{
                        // console.log(res)
                        // alert(msg)
                        if(res.code==0){
                            alert('修改成功')
                            window.location.href='./personal.html'
                        }
                        else{
                            alert(res.msg)
                        }
                    })
                })
            })
        </script>
    </body>

</html>